<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;


            /*left: 100px;*/
        }
        .parent{
            top: 40vh;
            left: 180px;
            position: relative;
            transform-style: preserve-3d;
            animation: test2 8s ease infinite;
        }
        .box{
            /*margin-left: -100px;*/
            margin-top: -20px;
            position: absolute;
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-weight: 700;
            text-align: center;
            font-size: 30px;
            /*opacity: 0.5;*/
            /*margin-top: -100px;*/
            /*margin-left: -100px;*/

        }
        .box1{
            background-color: #98bf21;
            transform:translateZ(20px) ;

        }
        .box2{
            background-color: sandybrown;
            transform:rotateX(90deg) translateZ(20px);
        }
        .box3{
            background-color: #98bf21;
            transform:translateZ(-20px) ;

        }
        .box4{
            background-color: sandybrown;
            transform:rotateX(90deg) translateZ(-20px);
        }
        @keyframes test2 {
            0% {transform: rotateX(0) rotateY(0) rotateZ(0)}
            100% {transform: rotateX(360deg) rotateY(0) rotateZ(0)}
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="box box1">1</div>
    <div class="box box2">2</div>
    <div class="box box3">3</div>
    <div class="box box4">4</div>
</div>
</body>
</html>